<template>
	<view class="me-container">
		<view class="personalInfo">
			<view class="cover">
				<image :src="user.headimg" mode="" v-if="istoken"></image>
				<image src="/static/images/signIn/pic3.jpg" mode="" v-else></image>
			</view>
			<view class="text" v-if="istoken">
				<view class="">
					<block v-if="user.username==''">{{user.nickname}}</block>
					<block v-else>{{user.username}}</block>
				</view>
				<view class="flex">
					ID：********
					<view class="copycover mgl-4" @click="copybtn">
						<image src="/static/images/me/copy.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="loginBtn" @click="wxGetUserInfo" v-else>
				登录/注册
			</view>
			<view class="cover2" @click="goEditInfo">
				<image src="/static/images/me/edit.png" mode=""></image>
			</view>
		</view>
		<view class="items">
			<view class="item flex align-center space-between" @click="goContactUs">
				<view class="flex align-center">
					<uni-icons type="person" size="20"></uni-icons> <text class="mgl-4">联系我们</text>
				</view>
				<uni-icons type="forward" size="20"></uni-icons>
			</view>
			<view class="item flex align-center space-between" @click="clearStorage">
				<view class="flex align-center">
					<uni-icons type="trash" size="20"></uni-icons> <text class="mgl-4">清除缓存</text>
				</view>
				<uni-icons type="forward" size="20"></uni-icons>
			</view>
			<view class="item flex align-center space-between" @click="goHelp">
				<view class="flex align-center">
					<uni-icons type="help" size="20"></uni-icons> <text class="mgl-4">帮助中心</text>
				</view>
				<uni-icons type="forward" size="20"></uni-icons>
			</view>
			<button class="item flex align-center space-between " open-type="contact">
				<view class="flex align-center">
					<uni-icons type="info" size="20"></uni-icons> <text class="mgl-4">意见反馈</text>
				</view>
				<uni-icons type="forward" size="20"></uni-icons>
			</button>
			<view class="item flex align-center space-between" @click="add">
				<view class="flex align-center">
					<uni-icons type="star" size="20"></uni-icons> <text class="mgl-4">添加到我的小程序</text>
				</view>
				<uni-icons type="forward" size="20"></uni-icons>
			</view>
			<view class="item flex align-center space-between" @click="goofficial">
				<view class="flex align-center">
					<uni-icons type="paperclip" size="20"></uni-icons> <text class="mgl-4">公众号如何接入签到</text>
				</view>
				<uni-icons type="forward" size="20"></uni-icons>
			</view>
		</view>
		<view v-if=" wxapp_banner_adv" class="ad">
			<ad :unit-id="wxapp_banner_adv" bindload="adLoad" binderror="adError" bindclose="adClose"></ad>
		</view>



		<!-- 添加到我的小程序的悬浮框 -->
		<view class="bigbox" v-if="isadd">
			点击[...]添加到我的小程序
			<view class="box">
				<view class="smallbox">
					<view class="covericon">
						<image src="/static/images/me/more.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="sanjiao">

			</view>
		</view>
		<!-- 遮罩层 -->
		<view class="mask" v-if="isadd" @click="add"></view>


	</view>
</template>

<script>
	import {
		gettoken,
	} from '@/api/login.js';
	import {
		getInfo,
	} from '@/api/user.js';
	import {
		getConfig
	} from "@/api/index.js";
	export default {
		data() {
			return {
				isadd: false, //是否点击了添加到我的小程序
				istoken: false, //
				user: {},
				nickname: "",
				imgurl: "",
				wxapp_banner_adv: "",
			};
		},
		onload() {

		},
		onShow() {
			this.init();
		},
		methods: {
			init() {
				getConfig({
					data: {
						
					}
				}).then(res => {
					if (res.code == 1) {
						console.log(res.data, '	{{wxapp_banner_adv}},')
						this.wxapp_banner_adv = res.data.wxapp_banner_adv
					}
				})
				// 获取用户信息,
				getInfo({
					data: {

					}
				}).then(res => {
					if (res.code == 1) {
						this.istoken = true;
						console.log(res.data);
						this.user = res.data.user;
						this.imgurl = res.data.user.headimg;
						this.nickname = res.data.user.nickname;
					} else if (res.code == 500) {
						this.istoken = false;
					}
				})



			},
			goEditInfo() {
				uni.navigateTo({
					url: "edit-info?imgurl=" + this.imgurl + "&nickname=" + this.nickname
				})
			},
			clearStorage() {
				uni.showLoading({
					title: '正在清除缓存...',
				});

				uni.setStorageSync('token', '');

				this.init();
				// 重新初始化页面
				setTimeout(() => {
					uni.showToast({
						title: '清除成功',
						icon: 'none'
					})
				}, 1000)
			},
			add() {
				this.isadd = !this.isadd
			},
			goContactUs() {
				uni.navigateTo({
					url: '/pages/me/contact-us'
				})
			},
			goHelp() {
				uni.navigateTo({
					url: '/pages/me/help'
				})
			},
			wxGetUserInfo() {
				uni.navigateTo({
					url: "../login/login"
				})
				// var _this = this;
				// uni.getUserProfile({
				// 	desc: '用于完善会员资料',
				// 	success: function(infoRes) {
				// 		console.log(infoRes.userInfo);
				// 		console.log('____');
				// 		_this.login(infoRes);
				// 	},
				// 	fail(res) {
				// 		console.log('fail', res);
				// 	}
				// });
			},
			//登录
			// login(infoRes) {
			// 	let _this = this;
			// 	uni.showLoading({});
			// 	uni.login({
			// 		provider: 'weixin',
			// 		success: function(info) {
			// 			gettoken({
			// 				data: {
			// 					code: info.code,
			// 				}
			// 			}).then(res => {
			// 				console.log(res);
			// 				uni.hideLoading();
			// 				uni.setStorageSync('token', res.data.token.token);
			// 				_this.init();
			// 			})
			// 		}
			// 	});

			// },
			copybtn() {
				uni.setClipboardData({
					data: this.user.code,
					success: function() {
						console.log('success');
					}
				});
			},
			goofficial() {
				uni.navigateTo({
					url: "official-account"
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.me-container {
		background-color: #f6f6f6;
		min-height: 100vh;
		padding: 0 20upx;

		.personalInfo {

			border-radius: 8upx;
			background-color: #FFFFFF;

			background: linear-gradient(#2090fe, #8d97e6);
			width: 100%;
			height: 180upx;
			padding: 20upx;
			display: flex;
			align-items: center;
			color: #fff;

			.cover2 {
				position: absolute;
				right: 30upx;
				top: 60upx;
				width: 60upx;
				height: 60upx;
				border-radius: 100upx;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.cover {
				width: 100upx;
				height: 100upx;
				border-radius: 100upx;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.loginBtn {
				font-size: 28upx;
				margin-left: 30upx;
				border: 1px solid #fff;
				border-radius: 50upx;
				box-shadow: 0 0 5upx #eee;
				padding: 10upx 20upx;

			}

			.text {
				margin-left: 30upx;
				font-size: 24upx;

				.copycover {
					width: 25upx;
					height: 25upx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		.items {
			background-color: #fff;
			border-radius: 8upx;
			padding: 0 20upx;
			margin-top: 20upx;

			.item {
				background: none;
				padding: 0;
				margin: 0;
				font-size: 28upx;
				height: 90upx;
				line-height: 1;

				&::after {
					border: none;

				}
			}

		}

		.bigbox {
			position: fixed;
			top: 20upx;
			right: 30upx;
			z-index: 666;
			padding: 20upx;
			width: 450upx;
			height: 220upx;
			background-color: #ffffff;
			border-radius: 20upx;

			.sanjiao {
				position: absolute;
				top: -20px;
				left: 150px;
				width: 0;
				height: 0;
				border: 10px solid transparent;
				border-bottom-color: #fff;
			}

			.box {
				margin-top: 8upx;
				background-color: #f7f7f7;
				border-radius: 5upx;
				height: 130upx;
				display: flex;
				justify-content: center;
				align-items: center;

				.smallbox {
					width: 80upx;
					height: 80upx;
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: #ffffff;
					border-radius: 20upx;
					margin: 0 auto;

					.covericon {
						width: 50upx;
						height: 50upx;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}
		.ad{
			margin-top: 20upx;
		}
	}
</style>
